@mixin swiper_height_width {
  height: 100%;
  width: 100%;
}

.block_sildes {
  .block_sildes_container {
    position: relative;
    &.container_wrapper {
      .swiper {
        border-radius: 6px;
        overflow: hidden;
      }
    }

    .btn {
      background-color: #ffffff;
      .swiper-button-prev,
      .swiper-button-next {
        height: 38px;
        width: 38px;
        flex-shrink: 0;
        background-image: none;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        position: relative;
        left: 0;
        right: 0;
        color: #404040;
        &.swiper-button-disabled {
          opacity: 1;
        }
      }
      .swiper-pagination {
        height: 38px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        border-left: 1px solid #e2e2e2;
        border-right: 1px solid #e2e2e2;
        .swiper-pagination-current {
          margin-right: 4px;
        }
        .swiper-pagination-total {
          margin-left: 4px;
        }
      }
    }
  }
  .swiper-pagination2 {
    .swiper-pagination-bullet {
      width: 12px;
      height: 12px;
      box-sizing: border-box;
      background-color: transparent;
      border: 2px solid #ffffff;
      opacity: 1;
      &.swiper-pagination-bullet-active {
        background-color: #ffffff;
      }
    }
  }

  .container-fill {
    padding: 0;
  }

  .swiper {
    position: relative;

    .swiper-wrapper {
      @include swiper_height_width;

      li {
        @include swiper_height_width;
        position: relative;
        overflow: hidden;
        .mask {
          background-color: var(--mask-color);
        }

        .text_box {
          position: absolute;
          height: 100%;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          box-sizing: border-box;
          width: 100%;
          &.top-left {
            align-items: flex-start;
            justify-content: flex-start;
            text-align: left;
          }
          &.top-center {
            align-items: flex-start;
            justify-content: center;
            text-align: center;
            text-align: center;
          }
          &.top-right {
            align-items: flex-start;
            justify-content: flex-end;
            text-align: right;
          }
          &.center-left {
            align-items: center;
            justify-content: flex-start;
            text-align: left;
          }
          &.center-center {
            align-items: center;
            justify-content: center;
            text-align: center;
          }
          &.center-right {
            align-items: center;
            justify-content: flex-end;
            text-align: right;
          }
          &.bottom-left {
            align-items: flex-end;
            justify-content: flex-start;
            text-align: left;
          }
          &.bottom-center {
            align-items: flex-end;
            justify-content: center;
            text-align: center;
          }
          &.bottom-right {
            align-items: flex-end;
            justify-content: flex-end;
            text-align: right;
          }

          .text_box_container {
            position: absolute;
            box-sizing: border-box;

            @media screen and (max-width: 767px) {
              max-width: 85%;
            }
            .item_subtitle {
              color: var(--subtitle-color);
            }

            .item_title {
              font-size: 76px;
              color: var(--title-color);
              font-family: var(--title_font_family);
              font-style: var(--title_font_style);
              line-height: 1.1em;
              @media screen and (max-width: 767px) {
                font-size: 32px;
              }

              transform: translateY(7px);
              opacity: 0;
            }

            .item_detail {
              margin-top: 15px;
              color: var(--detail-color);
              font-size: 1.3em;

              @media screen and (max-width: 767px) {
                font-size: 16px;
              }

              transform: translateY(7px);
              opacity: 0;
            }

            .btn_wrap {
              margin-top: 15px;
              a:nth-child(1) {
                margin-right: 15px;
              }

              a {
                display: inline-block;
                opacity: 0;
                margin-top: 15px;
              }
            }
          }
        }

        .slide-item-image {
          height: var(--height);
        }

        &.swiper-slide-active {
          .block-image-mobile,
          .block-image-pc {
            transform: scale(1);
            opacity: 1;
            transition: transform 1s cubic-bezier(0.18, 0.63, 0.25, 1),
              opacity 0.7s ease;
          }

          .item_title {
            opacity: 1 !important;
            transform: translateY(0) !important;
            transition: opacity 0.4s ease 0.2s,
              transform 0.6s cubic-bezier(0.26, 0.54, 0.32, 1) 0.2s;
          }

          .item_detail {
            opacity: 1 !important;
            transform: translateY(0) !important;
            transition: opacity 0.4s ease 0.4s,
              transform 0.6s cubic-bezier(0.26, 0.54, 0.32, 1) 0.4s;
          }

          .btn_wrap {
            a:nth-child(1) {
              animation: fade-in 1s ease 0.6s forwards;
            }

            a:nth-child(2) {
              animation: fade-in 1s ease 0.8s forwards;
            }
          }
        }

        .block-image-pc {
          display: block;
          opacity: 0;
          transform: scale(1.15);
        }

        .block-image-mobile {
          display: none;
          opacity: 0;
          transform: scale(1.15);
        }

        @media screen and (max-width: 767px) {
          .block-image-pc {
            display: none;
          }

          .block-image-mobile {
            display: block;
          }
        }

        img {
          @include swiper_height_width;
          object-fit: cover;
        }
      }
    }
  }
}
